<template>
  <div class="login">
    <el-card class="box-card">
      <div class="animate__animated animate__bounce title">牛小排剧本杀管理</div>
      <div class="change-btn">
        <el-button @click="changeCps(true)">登录</el-button>
        <el-button @click="changeCps(false)">注册</el-button>
      </div>
      <Login v-if="activeCps" />
      <Register v-else />
      <!-- <component :is="activeCps" /> -->
      <!-- <Login /> -->
    </el-card>
  </div>
</template>
<script setup lang="ts">
/*
      ref/reactive数据类型的特点:
      每次修改都会被追踪, 都会更新UI界面, 但是这样其实是非常消耗性能的
      所以如果我们有一些操作不需要追踪, 不需要更新UI界面, 那么这个时候,
      我们就可以通过toRaw方法拿到它的原始数据, 对原始数据进行修改
      这样就不会被追踪, 这样就不会更新UI界面, 这样性能就好了
      * */
import { Login } from "./cps/login";
import { Register } from "./cps/register";
// import { mixins } from "@/utils/mixins";
import { ref, onActivated, defineComponent, shallowRef } from "vue";
import type { DefineComponent } from "vue";

let activeCps = ref(true);

const changeCps = (status: boolean) => (activeCps.value = status);
</script>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20200620%2F7a99abad67ea525c0fbbdd31543786a5output_00003.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648479158&t=3d219c70b423b776057e3a5c7ca3ce99")
    no-repeat;
  background-size: 100% 100%;
  color: #fff;
  .box-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      font-size: 3vw;
      color: rgb(82, 18, 185);
      font-weight: bold;
    }
    .change-btn {
      margin: 15px;
    }
  }
}
</style>
